<template>
	<view 
		class="btn"
		:style="{'width': btnWidth + 'rpx', 'height': btnHeight + 'rpx', 'background-color': btnBgColor, 'color': btnColor, 'border-radius': borderRadius + 'rpx', 'border-width': borderWidth + 'rpx', 'border-color': borderColor}"
		:hover-class="btnHoverClass"
		hover-stay-time="100"
		@click="$emit('click')">
		{{btnText}}
	</view>
</template>

<script>
export default {
	props: {
		btnWidth: [String, Number],
		btnHeight: {
			type: String | Number,
			default: 80
		},
		btnBgColor: {
			type: String,
			default: '#de4f38'
		},
		btnColor: {
			type: String,
			default: '#ffffff'
		},
		borderRadius: {
			type: String | Number,
			default: 0
		},
		borderWidth: {
			type: String | Number,
			default: 0
		},
		borderColor: {
			type: String,
			default: '#171717'
		},
		btnText: {
			type: String,
			default: '确定'
		},
		btnHoverClass: {
			type: String,
			default: ''
		}
	}
}
</script>

<style lang="scss" scoped>
.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	border-style: solid;
}
.btn-hover-class {
	opacity: 0.9;
}
</style>
